/**
 * Created by Administrator on 2017/2/27.
 */
var RealName = require('../../src/complex/realName');
var AccountInfo = require('../../src/complex/accountInfo');

var Root = React.createClass({
    getInitialState: function () {
        return{
            realName:PageDM.realNameInfo.value,
            realNameVal:PageDM.realName.value,
            phoneNumVal: PageDM.phoneNum.value,
            ownPwdVal: PageDM.ownPwd.value
        }
    },
    showLayer: function(ref){
        var div = document.createElement("div");
        div.id = "grey-background";
        document.body.appendChild(div);
        this.refs[ref].style.display = "block";
        this.refs[ref].style.left = "50%";
        this.refs[ref].style.top = "50%";
        this.refs[ref].style.marginTop = -(this.refs[ref].offsetHeight/2)+"px";
        this.refs[ref].style.marginLeft = -(this.refs[ref].offsetWidth/2)+"px";
    },
    hideLayer: function(ref){
        this.refs[ref].style.display = "none";
        document.body.removeChild(document.getElementById("grey-background"));
    },
    /*登录密码修改弹窗 获取短信验证码按钮*/
    _getCoce:function(pm,ref){
        var PageDM = window.PageDM;
        var count = PageDM[pm].count;
        if(PageDM[pm].onClick()){
            var _node = this.refs[ref];
            _node.className = "btn btn-code btn-code-disabled";
            _node.innerHTML = count + "秒后重新获取";
            _node.disabled = true;
            var time = setInterval(function(){
                if(count > 0){
                    count--;
                    _node.innerHTML = count + "秒后重新获取";
                }else{
                    clearInterval(time);
                    _node.className = "btn btn-code ucs-btn";
                    _node.innerHTML = "获取验证码";
                    _node.disabled = false;
                }
            },1000);
        }
    },
    /*登录密码弹窗 确认按钮*/
    closeWindow:function(){
        var _validate = PageDM.btn.onClick();
        //console.log(this)
        if(_validate){
            this.hideLayer("layer-change-password");
        }
    },
    componentDidMount: function(){
        UEventHub.emit("pageLoad","hello world!");
        var _this = this;
        //个人实名信息
        UEventHub.on(PageDM.realNameInfo.dmbind + UI_EVENT_CONST.SET_UDM_VALUE_EVENT, function(v){
            _this.setState({
                realName: v
            })
        });
        //个人实名信息
        UEventHub.on(PageDM.realName.dmbind + UI_EVENT_CONST.SET_UDM_VALUE_EVENT, function(v){
            _this.setState({
                realNameVal: v
            });
        });
        UEventHub.on(PageDM.phoneNum.dmbind + UI_EVENT_CONST.SET_UDM_VALUE_EVENT, function(v){
            _this.setState({
                phoneNumVal: v
            });
        });
        UEventHub.on(PageDM.ownPwd.dmbind + UI_EVENT_CONST.SET_UDM_VALUE_EVENT, function(v){
            _this.setState({
                ownPwdVal: v
            });
        });
    },
    render: function() {
        var _this = this;
        var _accountinfo_data = {
            realName: _this.state.realNameVal,
            phoneNum: _this.state.phoneNumVal,
            ownPwd: _this.state.ownPwdVal
        };
        return (
            <div>
                <div className="header">
                    <div className="top-bar fc-light">
                        <div className="container">
                            <span>服务热线：0816-2373017</span>
                            <span>服务时间：工作日 9:00-18:00</span>
                            <span className="nav-right">
                                <a href="我的账户.html">186****5532</a>
                                <a href="javascript:;">退出</a>
                                <a href="../帮助中心/平台介绍.html">帮助中心</a>
                                <a href="../index.html">返回绵阳商业银行</a>
                            </span>
                        </div>
                    </div>
                    <div className="header-nav">
                        <div className="container">
                            <div className="logo f-left"><a href="../index.html"><img src="../images/logo.jpg" alt=""/> </a><a href="../index.html"><img src="../images/logoe.jpg" alt=""/> </a></div>
                            <div className="nav f-right">
                                <ul className="clearfix">
                                    <li><a href="../index.html">首页</a></li>
                                    <li><a href="../我要投资.html">我要投资</a></li>
                                    <li><a href="../我要借款.html">我要借款</a></li>
                                    <li><a href="我的账户.html" className="current">我的账户</a></li>
                                </ul>
                            </div>
                            <div className="clear"></div>
                        </div>
                        <div className="shadow"></div>
                    </div>
                </div>
                <div className="mod-account container">
                    <div className="sub-nav" ref="realName">
                        <RealName data={this.state.realName}/>
                    </div>
                    <div className="account padding">
                        <AccountInfo data={_accountinfo_data}/>
                    </div>
                    <div className="clear"></div>
                </div>
                <div className="footer">
                    <div className="container">
                        <div className="footer-logo f-left">
                            <p className="logo-foot"><img src="../images/foot-logo.png" alt="" /></p>
                            <p className="txt">2005－2013 绵阳市商业银行股份有限公司 <a href="http://www.miitbeian.gov.cn" target="_blank">粤ICP备11013283123号</a></p>
                        </div>
                        <div className="footer-nav f-right">
                            <div className="col">
                                <h3>关于我们</h3>
                                <ul>
                                    <li><a href="../帮助中心/平台介绍.html">平台介绍</a></li>
                                    <li><a href="../帮助中心/名词解释.html">名词解释</a></li>
                                    <li><a href="../帮助中心/联系我们.html">联系我们</a></li>
                                    <li><a href="../帮助中心/服务协议.html">服务协议</a></li>
                                </ul>
                            </div>
                            <div className="col">
                                <h3>安全保障</h3>
                                <ul>
                                    <li><a href="../帮助中心/安全保障.html">项目安全</a></li>
                                    <li><a href="../帮助中心/安全保障.html">资金安全</a></li>
                                    <li><a href="../帮助中心/安全保障.html">信息安全</a></li>
                                    <li><a href="../帮助中心/安全保障.html">账户安全</a></li>
                                </ul>
                            </div>
                            <div className="col">
                                <h3>帮助中心</h3>
                                <ul>
                                    <li><a href="../帮助中心/投资操作指引.html">投资指引</a></li>
                                    <li><a href="../帮助中心/融资操作指引.html">融资指引</a></li>
                                    <li><a href="../帮助中心/平台公告.html">平台公告</a></li>
                                    <li><a href="javascript:;">常见问题</a></li>
                                </ul>
                            </div>
                            <div className="col col-service">
                                <p>客服专线<br/>0816-2373017</p>
                                <p>服务时间<br/>工作日9:00 - 18:00</p>
                            </div>
                        </div>
                        <div className="clear"></div>
                    </div>
                </div>
            </div>
        )
    }
});
ReactDOM.render(<Root/>, document.getElementById('main'));